<template>
  <!-- 标样灌管理 -->
  <div class="page-padding-bg">

    <div>
      <manager-table :titleOption="titleOption" :tableTopBtn="tableTopBtn" :columns="columns" :dataSource="dataSource" :tableRBtn="tableRBtn" @tableRClick="tableRClick" @tableTopClick="tableTopClick"
        v-model="search1" v-model:search2="search2" @search_btn="search_btn" @resert="resert"></manager-table>

      <Pagination :currentPage="currentPage" :limit="limit" :total="total" @page_change="page_change"></Pagination>

      <!-- 弹层 -->
      <lay-layer v-model="is_visible" :area="['700px', '630px']" :title="visibleTitle" :btn="visible_opteron" :shadeClose="false">
        <div style="padding: 20px 40px 20px 20px;">
          <lay-form :model="form" ref="layFormRef11" required :rules="rules5">
            <lay-form-item label="编号" prop="smokeName">
              <lay-input v-model="form.smokeName" size="sm" placeholder="请输入"></lay-input>
            </lay-form-item>
            <lay-form-item label="香气" prop="smokeAroma">
              <lay-input v-model="form.smokeAroma" size="sm" placeholder="范围24 ~ 32"></lay-input>
            </lay-form-item>

            <lay-form-item label="余味" prop="smokeAftertaste">
              <lay-input v-model="form.smokeAftertaste" size="sm" placeholder="范围20 ~ 25"></lay-input>
            </lay-form-item>

            <lay-form-item label="光泽" prop="smokeGloss">
              <lay-input v-model="form.smokeGloss" size="sm" placeholder="范围3 ~ 5"></lay-input>
            </lay-form-item>

            <lay-form-item label="谐调" prop="smokeHarmony">
              <lay-input v-model="form.smokeHarmony" size="sm" placeholder="范围4 ~ 6"></lay-input>
            </lay-form-item>

            <lay-form-item label="杂气" prop="smokeImpure">
              <lay-input v-model="form.smokeImpure" size="sm" placeholder="范围8 ~ 12"></lay-input>
            </lay-form-item>

            <lay-form-item label="刺激性" prop="smokeThrill">
              <lay-input v-model="form.smokeThrill" size="sm" placeholder="范围15 ~ 20"></lay-input>
            </lay-form-item>
            <!-- <lay-form-item label="津贴" prop="perk">
              <lay-input v-model="form.perk" size="sm"></lay-input>
            </lay-form-item> -->
 
 
 
            <!-- <lay-form-item label="总计" prop="smokeTotal">
              <lay-input v-model="form.smokeTotal" size="sm"></lay-input>
            </lay-form-item> -->

          </lay-form>
        </div>
      </lay-layer>

    </div>

  </div>
</template>
  
  <script setup lang="ts">
import { layer } from "@layui/layui-vue";
import ManagerTable from "@/components/ManagerTable.vue";
import http from "@/http/index";
import { onMounted, ref } from "vue";
import Pagination from "@/components/pagination.vue";

interface FormType {
  smokeName: string | number;
  smokeAroma: string | number;
  smokeAftertaste: string | number;
  smokeGloss: string | number;
  smokeHarmony: string | number;
  smokeImpure: string | number;
  smokeThrill: string | number;
  smokeTotal: string | number;
}
// 上方查询配置
const titleOption = ref({
  name1: "编号",
  // name2: "时间",
  btn1: "查询",
  btn2: "重置",
  // name2Type: "time",
});
// 表格上方配置
const tableTopBtn = ref([
  {
    name: "新增",
    type: "primary",
    clickType: "add",
    id: "1",
    btnPer: "standard_add",
  },
  //   {
  //     name: "修改",
  //     type: "primary",
  //     clickType: "edit",
  //     id: "2",
  //   },
  //   {
  //     name: "删除",
  //     type: "danger",
  //     clickType: "del",
  //     id: "3",
  //   },
]);
// table 右侧配置
const tableRBtn = ref([
  {
    name: "修改",
    type: "primary",
    clickType: "edit",
    id: "1",
    btnPer: "standard_edit",
  },
  {
    name: "删除",
    type: "danger",
    clickType: "del",
    id: "2",
    btnPer: "standard_delete",
  },
]);

// 弹层控制
const is_visible = ref(false);
// 弹层表单
const form = ref<FormType>({
  smokeName: "",
  smokeAroma: "",
  smokeAftertaste: "",
  smokeGloss: "",
  smokeHarmony: "",
  smokeImpure: "",
  smokeThrill: "",
  smokeTotal: "",
  perk: "", //津贴
});

const rules5 = ref({
  smokeAroma: {
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));
      const isOneDecimal = /^\d+(\.\d{1})?$/.test(value);  
      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else if (value < 24) {
        callback(new Error(`${rule.field}不能低于24`));
      } else if (value > 32) {
        callback(new Error(`${rule.field}不能超过32`));
      }  else if (!isOneDecimal) {
        callback(new Error(`最多只能是一位小数`));
      } else {
        return true;
      }
    },
  },
  smokeAftertaste: {
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));
      const isOneDecimal = /^\d+(\.\d{1})?$/.test(value);  
      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else if (value < 20) {
        callback(new Error(`${rule.field}不能低于20`));
      } else if (value > 25) {
        callback(new Error(`${rule.field}不能超过25`));
      } else if (!isOneDecimal) {
        callback(new Error(`最多只能是一位小数`));
      }  else {
        return true;
      }
    },
  },
  smokeGloss: {
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));
      const isOneDecimal = /^\d+(\.\d{1})?$/.test(value);  
      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else if (value < 3) {
        callback(new Error(`${rule.field}不能低于3`));
      } else if (value > 5) {
        callback(new Error(`${rule.field}不能超过5`));
      } else if (!isOneDecimal) {
        callback(new Error(`最多只能是一位小数`));
      }  else {
        return true;
      }
    },
  },
  smokeHarmony: {
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));
      const isOneDecimal = /^\d+(\.\d{1})?$/.test(value);  
      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else if (value < 4) {
        callback(new Error(`${rule.field}不能低于4`));
      } else if (value > 6) {
        callback(new Error(`${rule.field}不能超过6`));
      } else if (!isOneDecimal) {
        callback(new Error(`最多只能是一位小数`));
      }  else {
        return true;
      }
    },
  },
  smokeImpure: {
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));
      const isOneDecimal = /^\d+(\.\d{1})?$/.test(value);  
      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else if (value < 8) {
        callback(new Error(`${rule.field}不能低于8`));
      } else if (value > 12) {
        callback(new Error(`${rule.field}不能超过12`));
      }  else if (!isOneDecimal) {
        callback(new Error(`最多只能是一位小数`));
      } else {
        return true;
      }
    },
  },
  smokeThrill: {
    
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));

      const isOneDecimal = /^\d+(\.\d{1})?$/.test(value);  
  

      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else if (value < 15) {
        callback(new Error(`${rule.field}不能低于15`));
      } else if (value > 20) {
        callback(new Error(`${rule.field}不能超过20`));
      } else if (!isOneDecimal) {
        callback(new Error(`最多只能是一位小数`));
      } else {
        return true;
      }
    },
  },
  perk: {
    validator(rule, value, callback, source, options) {
      console.log(isNaN(value));
      if (isNaN(value)) {
        callback(new Error(`${rule.field}输入格式不正确`));
      } else {
        return true;
      }
    },
  },
});

// 牌号  津贴
const search1 = ref("");
const search2 = ref("");

const layFormRef11 = ref();
// 弹层title
const visibleTitle = ref("");
// 弹层按钮
const visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      layFormRef11.value.validate(async (isValidate, model, errors) => {
        console.log(isValidate);
        console.log(form.value); 
        

        console.log(form.value.smokeAroma * 1 + form.value.smokeAftertaste * 1 + form.value.smokeGloss * 1 + form.value.smokeHarmony * 1 + form.value.smokeImpure * 1 + form.value.smokeThrill * 1);
        let all_result = form.value.smokeAroma * 1 + form.value.smokeAftertaste * 1 + form.value.smokeGloss * 1 + form.value.smokeHarmony * 1 + form.value.smokeImpure * 1 + form.value.smokeThrill * 1;
        form.value.smokeTotal = all_result;
        form.value.perk = 0;

        if (isValidate) {
          let data = {};
          let tip = "";
          let methods = "";
          if (visibleTitle.value == "添加") {
            data = form.value;
            tip = "添加";
            methods = "post";
          } else if (visibleTitle.value == "修改") {
            data = { ...form.value, id: tableID.value };
            tip = "修改";
            methods = "put";
          }

          const res = await http.corsApi("/smokeStandard", methods, data);
          console.log(res);
          if (res.data) {
     
            layer.confirm(tip + "成功", { icon: 1 });
            is_visible.value = false;
          }

          await get_list(pageNo.value, pageSize.value);
        }
      });
    },
  },
  {
    text: "取消",
    callback: () => {
      is_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 表格配置
const columns = ref([
  {
    title: "编号",
    key: "smokeName",
  },
  {
    title: "香气",
    key: "smokeAroma",
  },
  {
    title: "余味",
    key: "smokeAftertaste",
  },
  {
    title: "光泽",
    key: "smokeGloss",
  },
  {
    title: "谐调",
    key: "smokeHarmony",
  },
  {
    title: "杂气",
    key: "smokeImpure",
  },
  {
    title: "刺激性",
    key: "smokeThrill",
  },
  {
    title: "总计",
    key: "smokeTotal",
  },
  {
    title: "创建时间",
    key: "createday",
  },
  {
    title: "创建人",
    key: "creator",
  },

  {
    title: "操作",
    customSlot: "operator",
    key: "operator",
  },
]);
const dataSource = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
// 当前点击的id
const tableID = ref("");
// 表格操作按钮
const tableRClick = (item, row) => {
  console.log(item, row);
  if (item.clickType === "edit") {
    visibleTitle.value = "修改";
    is_visible.value = true;
    form.value = row;
    tableID.value = row.id;
  }

  if (item.clickType === "del") {
    layer.confirm("确认要删除吗？", {
      btn: [
        {
          text: "确认",
          callback: async (id) => {
            const res = await http.corsApi("/smokeStandard/batch", "delete", [row.id]);
            console.log(res);
            if (res.data) {
              await get_list(pageNo.value, pageSize.value);
              await layer.confirm("删除成功", { icon: 1 });
            }
            layer.close(id);
          },
        },
        {
          text: "取消",
          callback: (id) => {
            layer.close(id);
          },
        },
      ],
    });
  }
};
// 表格上方按钮
const tableTopClick = async (item) => {
  console.log(search1.value, search2.value);

  console.log(item);
  if (item.clickType === "add") {
    visibleTitle.value = "添加";
    is_visible.value = true;
    // Object.keys(form.value).forEach((key) => (form.value[key] = ""));

    form.value.smokeName = "";
    form.value.smokeAroma = "";
    form.value.smokeAftertaste = "";
    form.value.smokeGloss = "";
    form.value.smokeHarmony = "";
    form.value.smokeImpure = "";
    form.value.smokeThrill = "";
    form.value.smokeTotal = "";
    form.value.perk = ""; //津贴
  }
  await get_list(pageNo.value, pageSize.value);
};

// 查询
// 查询 
const search_btn = async () => {
  console.log(search2.value);

  await get_list(pageNo.value, pageSize.value);
};
// 重置
const resert = async () => {
  search1.value = "";
  search2.value = "";
  await get_list(pageNo.value, pageSize.value);
};

// 分页
const limit = ref(10);
const total = ref(0);
const currentPage = ref(1);
// 分页事件
const page_change = async (page, limt) => {
  console.log(page, limt);
  currentPage.value = page;
  await get_list(page, limt);
};

const get_list = async (page: number | string, pagesize: number | string) => {
  const res = await http.corsApi("/smokeStandard/page", "get", {
    pageNo: page,
    pageSize: pagesize,
    smokeName: search1.value,
    // smokePerk: search2.value,
    beginTime: search2?.value[0] || "",
    endTime: search2.value[1] || "",
  });

  console.log(res);
  dataSource.value = res.data.list;
  total.value = res.data.totalCount;
};

// 页面初始化、
onMounted(() => {
  get_list(pageNo.value, pageSize.value);
});
</script>
  
  <style scoped>
</style>